<template>
	<div class='main'>
		<movable-area style="width: 100vw;height: 100vh;overflow: hidden;">
			<movable-view  
				:style="{
					width:floorOption.width + 'px',
					height:floorOption.height + 'px',
				}"
				class="main-carport" 
				direction='all' 
				inertia 
				scale
				scale-min='0.5'
				scale-max='2'
				:scale-value='floorOption.scale'
				:x='floorOption.x'
				:y='floorOption.y'
				@change='change'
				@scale='scale'
			>
				<image
					v-if="data.floor === 0"
					class="main-carport--image" 
					src="@/static/F1.jpg"
					:style="{
						width: floorOption.width + 'px',
						height: floorOption.height + 'px',
					}"
				></image>
				<image
					v-else-if="data.floor === 1"
					class="main-carport--image" 
					src="@/static/B1.jpg"
					:style="{
						width: floorOption.width + 'px',
						height: floorOption.height + 'px',
					}"
				></image>
				<image
					v-else-if="data.floor === 2"
					class="main-carport--image" 
					src="@/static/B2.jpg"
					:style="{
						width: floorOption.width + 'px',
						height: floorOption.height + 'px',
					}"
				></image>
				<view 
					v-show="index === data.showIndex"
					v-for="(item,index) in data.options[data.floor]" :key="index" :style="{
					left: item.left,
					top: item.top,
					transform: item.rotate,
				}" class="main-highCarport">
					{{ floorOption.old }}
				</view>
			</movable-view>
		</movable-area>
		<button 
			v-if="data.openSpot"
			type="primary"
			@click="openSpot" 
			class="main-openSpot"
		>找车位</button> 
		
		<view v-else class="main-parkar">
			<button 
				type="warn"
				@click="reset" 
				class="main-parkar--close"
			>取消</button> 
			<button 
				type="primary"
				@click="openToast" 
				class="main-parkar--go"
			>去停车</button> 
		</view>
		
		<view class="main-floorList">
			<view 
				v-for="(item,index) in data.floorOptions" 
				:key="index" 
				@click="trigger(index)"
				:class="['main-floorList--item', data.floor === index && 'main-floorList--active']"
			>
				{{ item.label }}
			</view>
		</view>
	</div>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick, computed } from 'vue'
let data = reactive({
	openSpot: true,
	floorOptions:[
		{
			label:'F1',
			x: -600,
			y: -400,
			scale: 1,
			old: {
					x: 0,
					y: 0,
					scale: 1
			},
			width: '1200',
			height: '800',
		},
		{
			label:'B1',
			x: -350,
			y: -270,
			scale: 1.6,
			old: {
					x: 0,
					y: 0,
					scale: 1
			},
			width: '617',
			height: '546',
		},
		{
			label:'B2',
			x: -374,
			y: -273,
			scale: 1.6,
			old: {
					x: 0,
					y: 0,
					scale: 1
			},
			width: '758',
			height: '546'
		},
	],
	floor: 0,
	showIndex: undefined,
	options:[
		[
			{
				left: '958px',
				top: '130px',
				x: -1615.8,
				y: 0,
				scale: 1.827
			},
			{
				left: '950px',
				top: '665px',
				x: -1365.8,
				y: -886,
				scale: 1.6,
				rotate: 'rotate(90deg)'
			},
			{
				left: '223px',
				top: '318px',
				x: -109,
				y: -120.5,
				scale: 1.258,
			},
		]
	]
	
})
let floorOption = computed(() => data.floorOptions[data.floor])
function scale(e){
	floorOption.value.old.scale = e.detail.scale
}
function change(e){
	floorOption.value.old.x = e.detail.x
	floorOption.value.old.y = e.detail.y
}
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
function reset(){
	floorOption.value.scale = 1
	floorOption.value.x = -600
	floorOption.value.y = -400
	data.openSpot = true
	data.showIndex = undefined
}
function openSpot(){
	data.showIndex = getRandomInt(0,3)
	let item = data.options[data.floor][data.showIndex]
	data.openSpot = false
  floorOption.value.x = item.x
  floorOption.value.y = item.y
	floorOption.value.scale = item.scale
}
function openToast(){
	
}
function trigger(index){
	data.floor = index
}
</script>

<style lang='scss' scoped>
.main{
	background-color: #000;
	
	&-highCarport{
		width: 62px;
		height: 28px;
		position: fixed;
		background-color: green;
	}
	
	&-openSpot, &-parkar{
		bottom: 4%;
		width: 96%;
		margin-left: 2%;
		position: fixed;
	}
	
	&-parkar{
		display: flex;
		&--close{
			width: 26%;
			margin-right: 4%;
			/* background-color: grey; */
		}
		
		&--go{
			flex: 1;
		}
	}
	
	&-floorList{
		bottom: 16%;
		right: 4%;
		position: fixed;
		width: 10%;
		padding: 4% 2%;
		border-radius: 200px;
		background-color: #fff;
		
		&--item{
			text-align: center;
			color: darkgray;
			border-radius: 50%;
			line-height: 10vw;
		}
		
		&--active{
			color: #fff;
			background-color: blue;
		}
	}
}
</style>